<template>
  <div class="about">
    <h1>This is an about page</h1>
    <el-table :data="list" v-loading="pageLoading">
      <el-table-column prop="title" label="title" width="180"> </el-table-column>
      <el-table-column prop="description" label="description" width="180"> </el-table-column>
      <el-table-column prop="author" label="author"> </el-table-column>
      <el-table-column label="img">
        <template #default="scope">
          <img style="width: 50px; height: 50px" :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handlePageChange"> </el-pagination>
  </div>
</template>

<script>
import { getLogin, getTableList } from '@/api'
import useFetchList from '@/hooks/fetchList'
import { onMounted } from 'vue'
export default {
  name: 'about',
  data() {
    return {}
  },
  methods: {
    async init() {
      try {
        const res = await getLogin({
          username: 'okok',
          password: '123'
        })
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    }
  },
  mounted() {
    // this.init()
    // this.fetchList()
  },
  setup(props, context) {
    const {
      list,
      pageNum,
      total,
      pageLoading,
      //
      fetchListTable
    } = useFetchList((params) => {
      return getTableList({
        ...params
      })
    })

    const handlePageChange = (val) => {
      pageNum.value = val
      fetchListTable()
    }

    onMounted(() => {
      console.log('onMounted')
      fetchListTable(true)
    })

    return {
      list,
      total,
      pageLoading,
      //
      handlePageChange
    }
  }
}
</script>
